<template>
    <div>
  <el-upload class="upload"
                drag 
                 ref="upload"
                 action="string"
                 :file-list="fileList"	
                 :auto-upload="false"	
                 :http-request="uploadFile"	
                 :on-change="handleChange"
                 :on-preview="handlePreview"
                 :on-remove="handleRemove"
                 list-type="file"
                 multiple="multiple">	
                 <i class="el-icon-upload"></i>
            <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
            </div>
      </el-upload>
    <el-button id="class_submit_button" type="primary" @click="onSubmit" style="display">保存</el-button>


    <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="CK" name="first">

      <el-table
    :data="class_ck"
    border
    style="width: 100%">
    <el-table-column
      prop="name"
      label="类名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="dit"
      label="dit"
      width="180">
    </el-table-column>
    <el-table-column
      prop="cbo"
      label="cbo"
       width="180">
    </el-table-column>
    <el-table-column
      prop="noc"
      label="noc"
       width="180">
    </el-table-column>
  </el-table>


    </el-tab-pane>
    <el-tab-pane label="LK" name="second">


      <el-table
    :data="class_lk"
    border
    style="width: 100%">
    <el-table-column
      prop="className"
      label="类名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="cs"
      label="cs"
      width="180">
    </el-table-column>
    <el-table-column
      prop="noo"
      label="noo"
       width="180">
    </el-table-column>
    <el-table-column
      prop="noa"
      label="noa"
       width="180">
    </el-table-column>
    <el-table-column
      prop="si"
      label="si"
       width="180">
    </el-table-column>
  </el-table>
    </el-tab-pane>



    <el-tab-pane label="MOOD" name="third">
                  <el-descriptions class="margin-top" title="度量结果" :column="3" :size="size" border>



    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-location-outline"></i>
        AHF
      </template>
      {{ahf}}
    </el-descriptions-item>

    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-location-outline"></i>
        PF
      </template>
      {{pf}}
    </el-descriptions-item>

        <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-location-outline"></i>
        MIF
      </template>
      {{mif}}
    </el-descriptions-item>

        <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-location-outline"></i>
        AIF
      </template>
      {{aif}}
    </el-descriptions-item>

            <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-location-outline"></i>
        CF
      </template>
      {{cf}}
    </el-descriptions-item>

        <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-location-outline"></i>
        MHF
      </template>
      {{cf}}
    </el-descriptions-item>


  </el-descriptions>
    


    </el-tab-pane>

  </el-tabs>




</div>

</template>

<!-- <script src="assets/js/axios.min.js"></script> -->

<script>
module.exports = {
    data:function(){
    return{
	// el-upload组件绑定的属性—— :file-list=“fileList”,渲染后fileList[index]是Object类型,而不是后台所需的File类型,
      // 而这个组件已经把对应的File类型存储到了fileList[index].raw这个属性里,直接拿来用就好.
      fileList: [],
      // 不支持多选
      multiple: false,
      formData: "",


      //下面是表格需要的数据
      activeName: 'first',
      filename:"",
      class_ck:[],
      class_lk:[],


      ahf:0,
      pf:0,
      mif:0,
      aif:0,
      cf:0,
      mhf:0,

    }
},
methods:{
//点击上传文件触发的额外事件,清空fileList
delFile :function () {
      this.fileList = [];
    },
    handleChange :function (file, fileList) {
      this.fileList = fileList;
      // console.log(this.fileList, "sb");
    },
    //自定义上传文件
    uploadFile :function (file) {
      this.formData.append("file", file.file);
      // console.log(file.file, "sb2");
    },
    //删除文件
    handleRemove :function (file, fileList) {
      console.log(file, fileList);
    },
    // 点击文件
    handlePreview :function (file) {
      console.log(file);
    },

    //分页的点击函数
   handleClick(tab, event) {
        console.log(tab, event);
      },
    //保存按钮
    onSubmit :function() {

        this.filename=this.fileList[0].name
        console.log(this.filename)

        console.log("保存文件")
        let formData = new FormData();
        formData.append("file", this.fileList[0].raw);//拿到存在fileList的文件存放到formData中
       //下面数据是我自己设置的数据,可自行添加数据到formData(使用键值对方式存储)
        formData.append("title", this.title);
        axios.post("http://localhost:8080/api/uploadFile", formData, {
        "Content-Type": "multipart/form-data;charset=utf-8"
      })
        .then(res => {
          if (res.data === "SUCCESS") {
            this.$notify({
              title: '成功',
              message: '提交成功',
              type: 'success',
              duration: 1000
            });
          }
        })







        //以下是表格数据展示
        //ck
        var ck_url = "http://localhost:8080/api/ck/ck?name="+this.filename
        axios.post(ck_url).then((res)=>{
                this.class_ck = res.data.data
                console.log(this.class_ck)

                console.log(this.class_ck[0].name)

			    
			    })
        

        //lk
        var lk_url = "http://localhost:8080/api/lk/lk?name="+this.filename
        axios.post(lk_url).then((res)=>{
                this.class_lk = res.data.data
                console.log(this.class_lk)

                console.log(this.class_lk[0].name)
                
			    
			    })

   let formData2 = new FormData();
   formData2.append("javaFiles", this.fileList[0].raw);//拿到存在fileList的文件存放到formData中
  formData2.append("title", this.title);
    axios.post("http://localhost:8080/api/mood/metric", formData2, {
        "Content-Type": "multipart/form-data;charset=utf-8"
      })
        .then(res => {
            a = res.data.data
            console.log("moodmooodmoodmooodmoodmooodmoodmooodmoodmooodmoodmoood")
            console.log(a)

            this.ahf=res.data.data.ahf
            this.pf=res.data.data.pf
            this.mif=res.data.data.mif
            this.aif=res.data.data.aif
            this.cf=res.data.data.cf
            this.mhf=res.data.data.mhf
        })

    
    }
}
    



}
</script>

<style>
/*提交按钮跟上下保持距离*/
#class_submit_button{
  margin-top: 10px;
  margin-bottom: 10px;
}


</style>